'use strict';
import React, {Component} from 'react';
import {
    View,
    Animated,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
    BackAndroid,
    NativeModules,
    Platform,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import Toast from '../Utils/toast';

let {width, height} = Global.Const.size;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.3)',
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        justifyContent: 'flex-end',
        zIndex: 9,
    },
    rowContent: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#F2F3F5',
        width,
        alignItems: 'center',
    },
    item: {
        width: width / 3,
        height: width / 3 + 10,
        padding: 10,
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#F2F3F5',
        justifyContent: 'center',
    },
    icon: {
        width: width / 6,
        height: width / 6,
    }
});

const array = [
    {
        id: 1,
        title: '微信',
        icon: require('../../Image/wechat_title_20_1.png'),
        type: 'Wechat',
    },
    {
        id: 2,
        title: '朋友圈',
        icon: require('../../Image/pengyou_title_20_2.png'),
        type: 'WechatMoments',
    },
    // {
    //     id: 3,
    //     title: '新浪',
    //     icon: require('../../Image/xinlang_title_20_3.png'),
    //     type: 'SinaWeibo',
    // },
    {
        id: 4,
        title: 'QQ',
        icon: require('../../Image/qqhao_tilte_20_4.png'),
        type: 'QQ',
    },
];

class BottomShareView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(0),
            isShow: false,
            top: height,
        };
    }

    showShareView() {
        Animated.timing(
            this.state.height,
            {
                toValue: (width / 4 + 30),
                duration: 250,
            }
        ).start();
        this.setState({
            isShow: true,
            top: 0,
        })
    }

    hideShareView() {
        Animated.timing(
            this.state.height,
            {
                toValue: 0,
                duration: 250,
            }
        ).start();
        this.setState({
            isShow: false,
            top: height,
        })
    }

    componentDidMount() {
        BackAndroid.addEventListener('HelpToBuy', () => this.goBack());
    }

    componentWillUnMount() {
        BackAndroid.removeEventListener('HelpToBuy', () => this.goBack());
    }

    goBack() {
        if (this.state.isShow) {
            this.hideShareView();
            return true;
        }
        return false;
    }

    shareMessage(type, shareTitle, shareContent, shareImageUrl, shareUrl) {
        if (!type) {
            return;
        }
        if (Platform.OS === 'android') {
            NativeModules.LoginShareModule.share(type,
                shareTitle,
                shareContent,
                shareImageUrl,
                shareUrl,
                (msg) => {
                    if (msg === 'onComplete') {
                        Toast.show('分享成功');
                        return;
                    }
                    if (msg === 'onCancel') {
                        Toast.show('分享取消');
                        return;
                    }
                    if (msg === 'onError') {
                        Toast.show('分享失败');
                    }
                }, (msg) => {
                    Toast.show('分享失败');
                })
        }
        if (Platform.OS === 'ios') {
            NativeModules.ShareSDK.share(
                type,
                shareTitle,
                shareContent,
                shareImageUrl,
                shareUrl)
                .then((datas)=> {
                    Toast.show('分享成功');
                })
                .catch((err)=> {
                    if (err.code === 'fail') {
                        Toast.show('分享失败');
                    }
                    if (err.code === 'cancel') {
                        Toast.show('分享取消');
                    }
                });

        }
    }

    render() {
        let {
            shareTitle,
            shareContent,
            shareImageUrl,
            shareUrl,
        } = this.props;
        return (
            <TouchableOpacity style={[styles.container, {top: this.state.top}]} activeOpacity={1} onPress={() => {
                this.hideShareView();
            }}>
                <Animated.View style={[styles.rowContent, {height: this.state.height}]}>
                    {
                        array.map((item, index) => {
                            let borderLeftWidth = 1;
                            let borderTopWidth = 1;
                            if (index % 3 !== 0) {
                                borderLeftWidth = 0;
                            }
                            if (index >= 3) {
                                borderTopWidth = 0;
                            }
                            return (
                                <TouchableOpacity key={'share' + index}
                                                  onPress={() => this.shareMessage(item.type,shareTitle, shareContent,shareImageUrl,shareUrl)}
                                >
                                    <View style={[styles.item, {borderTopWidth, borderLeftWidth}]}>
                                        <View style={{
                                            width: width / 6,
                                            height: width / 6,
                                            borderRadius: width / 6,
                                        }}>
                                            <Image style={styles.icon}
                                                   source={item ? item.icon : 0}/>
                                        </View>
                                        <Text style={{
                                            fontSize: 12,
                                            color: Global.FontColor.LightGrey,
                                            marginTop: 5
                                        }}>{item.title}</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }
                </Animated.View>
            </TouchableOpacity>
        )
    }

}

export default BottomShareView;